<template>
  <com-header title="详情页面"></com-header>
  <div class="slider">
    <van-image :src="product.image" />
  </div>
  <section class="product p-l-10 p-b-10">
    <van-row align="center" justify="start" class="p-t-5">
      <van-image width="18" height="18" :src="icons[product.type - 1]" />
      <van-col :span="22">
        <div class="van-ellipsis text-3 ftn16 p-l-5">
          {{ product.name }}
        </div>
      </van-col>
    </van-row>
    <van-row align="center" class="van-hairline--bottom p-b-10">
      <van-col :span="8">
        <span class="ftn14 text-7">活动ID：</span>
        <span class="text-green ftn18" v-text="product.id"></span>
      </van-col>
      <van-col :span="8">
        <span class="ftn14 text-7">下单:</span>
        <span class="ftn14 text-7">￥</span>
        <span class="text-green ftn18" v-text="product.price"></span>
      </van-col>
      <van-col :span="8" v-if="product.type == 2">
        <span class="ftn14 text-7">折扣价：</span>
        <span class="ftn14 text-7">￥</span>
        <span
          class="text-green ftn18"
          v-text="(product.price - product.back_price).toFixed(2)"
        ></span>
      </van-col>
    </van-row>
    <van-row class="p-t-10">
      <van-col :span="8">
        <span class="ftn14 text-7 p-r-5">剩余</span>
        <span class="text-3 ftn14">{{ product.exitnum }}份</span>
      </van-col>
      <van-col :span="8">
        <span class="ftn14 text-7 p-r-5">总数</span>
        <span class="text-3 ftn14">{{ product.num }}份</span>
      </van-col>
    </van-row>
    <van-row class="p-t-5">
      <van-col :span="8">
        <span class="ftn14 text-7 p-r-5">申请</span>
        <span class="text-3 ftn14">{{ product.hot }}人</span>
      </van-col>
      <van-col :span="8">
        <span class="ftn14 text-7 p-r-5">通过</span>
        <span class="text-3 ftn14">{{ product.pass }}人</span>
      </van-col>
      <van-col :span="8">
        <span class="ftn14 text-7 p-r-5">试用</span>
        <span class="text-3 ftn14">{{ product.finish }}人</span>
      </van-col>
    </van-row>
    <div class="p-t-5">
      <van-button
        type="primary"
        size="mini"
        v-for="item in product.label"
        v-text="item"
      ></van-button>
    </div>

    <van-tabs
      v-model:active="active"
      color="#1baeae"
      line-height="1px"
      title-active-color="#1baeae"
      title-inactive-color="#444"
      class="p-t-10"
    >
      <van-tab>
        <template #title>
          <div>试用详情</div>
        </template>
        <div class="padded-10">
          <div class="text-green ftn16 p-b-10 bold">试用流程</div>
          <div class="text-7 ftn14 p-b-10" style="line-height: 1.8">
            1、申请试用。
            <br />
            2、获得试用资格。
            <br />
            3、按要求以<span class="text-green" v-text="product.price"></span
            >元购买 ，下单后立即回到极客试用填写订单号
            <br />
            4、完成交易 → 给予评价，来极客试用填写试用报告。
            <br />
            5、报告通过后返款<span
              class="text-green"
              v-text="product.back_price"
            ></span
            >元到您极客试用账号中，试用完成。
          </div>
          <div class="text-green ftn16 p-b-10 p-t-10 bold">试用要求</div>
          <div class="text-7 ftn14 p-b-10" style="line-height: 1.8">
            1、必须用申请试用的买号去下单购买。
            <br />
            <span class="text-green"
              >2、必须是您本人签收，并拍了包裹订单信息图后才可去提交试用报告。</span
            >
            <br />
            3、禁止秒拍，需按要求浏览商品后再下单。
            <br />
            4、禁止使用信用卡、淘金币、集分宝、分期付款、朋友代付、淘宝客等方式付款。
            <br />
            5、试客不享受商家店铺所有优惠活动。
          </div>
        </div>
      </van-tab>
      <van-tab>
        <template #title>
          <div>试用纪录</div>
        </template>
        <van-list
          v-model:loading="record.loading"
          :finished="record.finished"
          :finished-text="
            record.data.length > 0 && record.finished ? '没有更多数据' : ''
          "
          @load="onLoadRecord"
        >
          <van-empty
            description="暂无试用记录"
            v-if="record.finished && record.param.p == 1"
          />
          <van-row class="padded-10" v-else>
            <van-col
              :span="6"
              class="text-center p-b-10"
              v-for="item in record.data"
            >
              <van-image round width="45" height="45" :src="item.avatar" />
              <div class="ftn14 text-3 text-center van-ellipsis">
                {{ item.nickname }}
              </div>
            </van-col>
          </van-row>
        </van-list>
      </van-tab>
    </van-tabs>
  </section>
  <div :style="{ height: `${tabH}px` }"></div>
  <van-action-bar :ref="tabbar">
    <van-action-bar-button
      color="#999"
      type="danger"
      :text="`商家已存${product.total}元保证金`"
    />
    <van-action-bar-button
      :color="product.order_id ? '#333' : '#1baeae'"
      type="danger"
      @click="onClickButton"
    >
      <van-count-down
        :time="product.exittime * 1000"
        @finish="init"
        v-if="product.exittime"
      >
        <template #default="timeData">
          <span class="text-f">{{ timeData.days }}</span>
          <span class="text-f">天</span>
          <span class="text-f">{{ timeData.hours }}</span>
          <span class="text-f">时</span>
          <span class="text-f">{{ timeData.minutes }}</span>
          <span class="text-f">分</span>
          <span class="text-f">{{ timeData.seconds }}</span>
          <span class="text-f">秒</span>
        </template>
      </van-count-down>
      <span class="text-f" v-else-if="product.order_id">试用详情</span>
      <span v-else>我要申请</span>
    </van-action-bar-button>
  </van-action-bar>

  <!-- 选择买号 -->
  <van-overlay :show="select.show" @click="select.show = false">
    <div class="wrapper" @click.stop>
      <div class="bg-f content">
        <div
          class="bg-green text-f text-center ftn16 p-t-5 p-b-5"
          v-text="`选择${titles[product.type]}帐号`"
        ></div>
        <van-radio-group v-model="select.checked">
          <van-cell-group inset>
            <van-cell
              clickable
              @click="select.checked = item['username']"
              v-for="item in product?.buynum"
            >
              <template #title>
                <div v-text="item['username']"></div>
                <div v-text="item['text']"></div>
              </template>
              <template #right-icon>
                <van-radio :name="item['username']" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <van-row>
          <van-col :span="12">
            <van-button type="default" size="large" @click="select.show = false"
              >取消</van-button
            >
          </van-col>
          <van-col :span="12">
            <van-button type="primary" size="large" @click="fnConfirm"
              >确定</van-button
            >
          </van-col>
        </van-row>
      </div>
    </div>
  </van-overlay>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "@/stores/store";
import { productDetail, productRecord, apply } from "@/service/good";
import { fnMsg, icons } from "@/plugins/common";

type IItem = {
  avatar: string;
  nickname: string;
};
type IParam = {
  p: number;
  n: number;
};
type IRcord = {
  loading: boolean;
  finished: boolean;
  isLoading: boolean;
  data: IItem[];
  param: IParam;
};
export default defineComponent({
  setup() {
    const route = useRoute(),
        router = useRouter(),
      store = useStore(),
      active = ref(0),
      product = ref({
        id: "",
        image: "",
        name: "",
        price: 0,
        type: 1,
        back_price: 0,
        exittime: 0,
        exitnum: 0,
        num: 0,
        hot: 0,
        pass: 0,
        finish: 0,
        label: [],
        total: 0,
        order_id: null,
        buynum: [],
        is_auth: 0
      })
    const record = ref<IRcord>({
      loading: false,
      finished: false,
      isLoading: false,
      data: [],
      param: {
        p: 0,
        n: 20,
      },
    });
    const tabH = ref<Number>(0),
      tabbar = (el: any) => {
        tabH.value = el?.$el.clientHeight;
      },
      titles: any = {
        1: "淘宝天猫阿里",
        2: "淘宝天猫阿里",
        5: "淘宝天猫阿里",
        3: "京东",
        4: "拼多多",
        6: "抖音",
        7: "快手",
      },
      select = ref({
        show: false,
        buynum: "",
        checked: "",
      });

    const init = () => {
      productDetail({ id: route.params.id, uid: store.state.user.uid }).then(
        (res) => {
          console.log(res);
          if (res && res.status) {
            product.value = res.data;
          }
        }
      );
    };

    const onLoadRecord = () => {
      let { loading, finished, isLoading, param, data } = record.value;
      if (!isLoading && !finished) {
        isLoading = true;
        param.p++;
        productRecord({
          goods_id: route.params.id,
          p: param.p,
          n: param.n,
        }).then((res) => {
          isLoading = false;
          loading = false;
          if (res && res.status) {
            data = [...data, ...res.data];
          } else {
            finished = true;
          }
          record.value = { loading, finished, isLoading, param, data };
        });
      }
    };
    const onClickButton = () => {
      if (!product.value.exittime && !product.value.order_id) {
        if (!product.value.is_auth) {
            fnMsg('请先实名认证');
            setTimeout(() => {
                router.push({
                    name: 'certification'
                })
            }, 1000)
            return false
        } else if (!select.value.buynum) {
          select.value.show = true;
        }
      } else if (product.value.order_id) {
        router.push({
          name: 'order_detail',
          params: {
            id: product.value.order_id
          }
        })
      }
    };

    const fnConfirm = () => {
        if (!select.value.checked) {
            fnMsg('请选择买号');
            return false;
        } else {
            select.value.buynum = select.value.checked;
            apply({goods_id: product.value.id, uid: store.state.user.uid, buynum: select.value.buynum}).then(res => {
                if (res) {
                    fnMsg(res.msg);
                    if (res.status) {
                        product.value.order_id = res.order_id
                        select.value.show = false;
                    }
                }
            })
        }
    };

    onMounted(() => {
      init();
    });
    return {
      active,
      product,
      icons,
      record,
      tabbar,
      tabH,
      titles,
      init,
      onClickButton,
      onLoadRecord,
      select,
      fnConfirm,
    };
  },
});
</script>

<style lang="less">
.slider {
  width: 100%;
  height: 0;
  /* 图片的高宽比 */
  padding-bottom: 100%;
  .van-image,
  img {
    width: 100%;
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .content {
    border-radius: 4px;
    width: 75%;
  }
}
</style>
